import React, { Component } from "react";
import {
    Layout, Menu, Icon, Table, Divider, Button, Modal, Form, Input,
    TimePicker, Popconfirm, message, Alert, DatePicker, Tree, Steps,
    Select, Tabs, List, Card, Collapse, Dropdown, Drawer, Skeleton,
    Transfer, Tag, Col, Row, Avatar, AutoComplete, Empty, notification,
    Progress, Spin, Rate, Upload, Statistic
} from "antd";
import {
    getPatrolCountByDay, getInspectTimeByDay, getTroublePoint, getTroubleItem,
    getPatrolCountAll, getTodayInfo, getAllTimeInfo
} from "../js/api.js";
import {
    getSchoolInformationBySchool, 
    getSecurityDataBySchool, 
    getAvgAndMaxSecurityData
} from "../js/api.js";
import {
    getComprehensivePointsRankApi, 
    getSchoolBySchooLevelApi, 
    getEduPatrolNumRankApi, 
    getEduDangerNumRankApi,
    getAverageInspectClassRatesApi,
    getEduPatrolRatesRankApi,
} from "../js/edudailystatistics.js"
import { InspectConditionDataForInpsectpush} from "../js/inspectpushapi.js";
import moment from 'moment';
const echarts = require('echarts');

class scoreRank extends Component {
    constructor(props) {
        super(props);

        this.state = {
            alertVisible: false, //提示
            confirmLoading: false,
            msg: "", //提交失败时的提示语
            tableLoading: true,
            chartsNum: 15,
            doneChartsNum: 0,
            real: 0,
            should:0,
            chartDataPatrolAll: {
                monthList: [],
                chartData: [{
                    date: [],
                    real: [],
                    should: []
                }]
            },
            topChartDataToday: {
                should: 0,
                real: 0,
                safetySceneFound: 0,
                safetySceneDeal: 0,
            },
            chartData: [],
            avgchartData: [],
            maxchartData: [],
            modalTitle: '',
            allschoolnum1:0,
            allschoolnum2:0,
            comprehensivePointsRank1:0,
            comprehensivePointsRank2:0,
            dangerNumRank1:0,
            dangerNumRank2:0,
            patrolNumRank1:0,
            patrolNumRank2:0,
            patrolRatesRank1:0,
            patrolRatesRank2:0,
            inspectNumRank1:0,
            inspectNumRank2:0,
            inspectRatesRank1:0,
            inspectRatesRank2:0,
        };
    }

    componentDidMount() {
        this.refreshData();
    }

    refreshData() {
        this.setState({
            confirmLoading: true,
            doneChartsNum: 0,
        });

        getPatrolCountAll(parseInt(sessionStorage.getItem("departmentId")))
            .then((res) => {
                this.setState({
                    chartDataPatrolAll: res.data,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });

                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        getTodayInfo(parseInt(sessionStorage.getItem("departmentId")))
            .then((res) => {
                this.setState({
                    topChartDataToday: res.data,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });

                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

            InspectConditionDataForInpsectpush(parseInt(sessionStorage.getItem("departmentId")), moment().week(moment().week()).startOf('week').add(4, "days").format('YYYY-MM-DD'), 'zhou')
            .then((res) => {
                //得到上半个页面的数据
                let classData = [];
                res.data.data.forEach((item, index) => {
                    classData.push({
                        should: parseInt(item.should), //应巡计划数量
                        real: parseInt(item.real), //完成计划数量
                    });
                });
                this.setState({
                    classData: classData,
                    should: res.data.shouldAllClass, //应巡计划数量
                    real: res.data.realAllClass, //实巡计划数量
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

            getComprehensivePointsRankApi(-1, sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
            .then((res) => {
                let comprehensivePointsRank1=1
                if(res.data.comprehensivePointsRankList.length!=0){
                    for(let i=0; i<res.data.comprehensivePointsRankList.length; i++){
                        if(res.data.comprehensivePointsRankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                            comprehensivePointsRank1++
                        }else{
                            break
                        }
                    }
                }
                this.setState({
                    comprehensivePointsRank1:comprehensivePointsRank1,
                    allschoolnum1:res.data.comprehensivePointsRankList.length,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });
                    
            getEduDangerNumRankApi(-1, sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
            .then((res) => {
                let dangerNumRank1=1
                if(res.data.edudangernumrankList.length!=0){
                    for(let i=0; i<res.data.edudangernumrankList.length; i++){
                        if(res.data.edudangernumrankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                            dangerNumRank1++
                        }else{
                            break
                        }
                    }
                }
                this.setState({
                    dangerNumRank1:dangerNumRank1,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

            getEduPatrolNumRankApi(-1, sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
            .then((res) => {
                let patrolNumRank1=1
                if(res.data.edupatrolnumrankList.length!=0){
                    for(let i=0; i<res.data.edupatrolnumrankList.length; i++){
                        if(res.data.edupatrolnumrankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                            patrolNumRank1++
                        }else{
                            break
                        }
                    }
                }
                this.setState({
                    patrolNumRank1:patrolNumRank1,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

            getEduPatrolRatesRankApi(-1, sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
            .then((res) => {
                let patrolRatesRank1=1
                if(res.data.edupatrolratesrankList.length!=0){
                    for(let i=0; i<res.data.edupatrolratesrankList.length; i++){
                        if(res.data.edupatrolratesrankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                            patrolRatesRank1++
                        }else{
                            break
                        }
                    }
                }
                this.setState({
                    patrolRatesRank1:patrolRatesRank1,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

            getSchoolBySchooLevelApi(-1, sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
            .then((res) => {
                let inspectNumRank1=1
                if(res.data.length!=0){
                    for(let i=0; i<res.data.length; i++){
                        if(res.data[i].schoolname!=sessionStorage.getItem("departmentName")){
                            inspectNumRank1++
                        }else{
                            break
                        }
                    }
                }
                this.setState({
                    inspectNumRank1:inspectNumRank1,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

            getAverageInspectClassRatesApi(-1, sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
            .then((res) => {
                let inspectRatesRank1=1
                if(res.data.length!=0){
                    for(let i=0; i<res.data.length; i++){
                        if(res.data[i].schoolname!=sessionStorage.getItem("departmentName")){
                            inspectRatesRank1++
                        }else{
                            break
                        }
                    }
                }
                this.setState({
                    inspectRatesRank1:inspectRatesRank1,
                    doneChartsNum: this.state.doneChartsNum + 1,
                });
                //所有图表数据都加载完成才使骨架屏可见
                console.log('doneChartsNum', this.state.doneChartsNum)
                if (this.state.doneChartsNum == this.state.chartsNum) {
                    this.setState({
                        confirmLoading: false,
                    });
                }
            })
            .catch((e) => {
                if (e.response) {
                    //请求已发出，服务器返回状态码不是2xx。
                    console.info(e.response.data)
                    console.info(e.response.status)
                    console.info(e.response.headers)
                } else if (e.request) {
                    // 请求已发出，但没有收到响应
                    // e.request 在浏览器里是一个XMLHttpRequest实例，
                    // 在node中是一个http.ClientRequest实例
                    console.info(e.request)
                } else {
                    //发送请求时异常，捕捉到错误
                    console.info('error', e.message)
                }
                console.info(e.config)
            });

        getComprehensivePointsRankApi(parseInt(sessionStorage.getItem("parent")), sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let comprehensivePointsRank2=1
            if(res.data.comprehensivePointsRankList.length!=0){
                for(let i=0; i<res.data.comprehensivePointsRankList.length; i++){
                    if(res.data.comprehensivePointsRankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                        comprehensivePointsRank2++
                    }else{
                        break
                    }
                }
            }
            this.setState({
                comprehensivePointsRank2:comprehensivePointsRank2,
                allschoolnum2:res.data.comprehensivePointsRankList.length,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            //所有图表数据都加载完成才使骨架屏可见
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });
        
        getEduDangerNumRankApi(parseInt(sessionStorage.getItem("parent")), sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let dangerNumRank2=1
            if(res.data.edudangernumrankList.length!=0){
                for(let i=0; i<res.data.edudangernumrankList.length; i++){
                    if(res.data.edudangernumrankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                        dangerNumRank2++
                    }else{
                        break
                    }
                }
            }
            this.setState({
                dangerNumRank2:dangerNumRank2,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            //所有图表数据都加载完成才使骨架屏可见
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });

        getEduPatrolNumRankApi(parseInt(sessionStorage.getItem("parent")), sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let patrolNumRank2=1
            if(res.data.edupatrolnumrankList.length!=0){
                for(let i=0; i<res.data.edupatrolnumrankList.length; i++){
                    if(res.data.edupatrolnumrankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                        patrolNumRank2++
                    }else{
                        break
                    }
                }
            }
            this.setState({
                patrolNumRank2:patrolNumRank2,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            //所有图表数据都加载完成才使骨架屏可见
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });

        getEduPatrolRatesRankApi(parseInt(sessionStorage.getItem("parent")), sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let patrolRatesRank2=1
            if(res.data.edupatrolratesrankList.length!=0){
                for(let i=0; i<res.data.edupatrolratesrankList.length; i++){
                    if(res.data.edupatrolratesrankList[i].schoolname!=sessionStorage.getItem("departmentName")){
                        patrolRatesRank2++
                    }else{
                        break
                    }
                }
            }
            this.setState({
                patrolRatesRank2:patrolRatesRank2,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            //所有图表数据都加载完成才使骨架屏可见
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });

        getSchoolBySchooLevelApi(parseInt(sessionStorage.getItem("parent")), sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let inspectNumRank2=1
            if(res.data.length!=0){
                for(let i=0; i<res.data.length; i++){
                    if(res.data[i].schoolname!=sessionStorage.getItem("departmentName")){
                        inspectNumRank2++
                    }else{
                        break
                    }
                }
            }
            this.setState({
                inspectNumRank2:inspectNumRank2,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            //所有图表数据都加载完成才使骨架屏可见
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });

        getAverageInspectClassRatesApi(parseInt(sessionStorage.getItem("parent")), sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let inspectRatesRank2=1
            if(res.data.length!=0){
                for(let i=0; i<res.data.length; i++){
                    if(res.data[i].schoolname!=sessionStorage.getItem("departmentName")){
                        inspectRatesRank2++
                    }else{
                        break
                    }
                }
            }
            this.setState({
                inspectRatesRank2:inspectRatesRank2,
                doneChartsNum: this.state.doneChartsNum + 1,
            });
            //所有图表数据都加载完成才使骨架屏可见
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });


    }


    render() {
        let gridStyle = {
            marginBottom: 24,
        };

        let cellSize = [80, 80];
        let pieRadius = 30;
        let winWidth;
        // 获取窗口宽度
        if (window.innerWidth)
            winWidth = window.innerWidth;
        else if ((document.body) && (document.body.clientWidth))
            winWidth = document.body.clientWidth;
        if (winWidth < 1500) {
            cellSize = [55, 55];
            pieRadius = 24;
        }



        return (
            <div style={{ background: '#f0f2f5', margin: -24, }}>
                <Row gutter={24}>
                    <Col span={8}>
                        <Card
                            style={gridStyle}
                            bodyStyle={{
                                height: 160,
                                padding: '12px 16px',
                                backgroundColor: 'rgb(233, 217, 211)',
                            }}
                            bordered={false}>
                            <Skeleton loading={this.state.confirmLoading} active>
                                <Row
                                    style={{ height: '100%' }}
                                    type="flex"
                                    justify="space-around"
                                    align="middle">
                                    <Col span={6}>
                                        <img className="charticon"
                                            src={require("../img/jinrixungeng.png")} />
                                    </Col>
                                    <Col span={18} style={{ width: 200 }}>
                                        <Row style={{
                                            fontSize: "20px",
                                            fontWeight: "bold",
                                            color: "#000",
                                            textAlign: "center",
                                        }}>
                                            今日巡更/计划巡更
                                        </Row>
                                        <Row style={{
                                            fontSize: "30px",
                                            fontWeight: "bold",
                                            textAlign: "center",
                                        }}>
                                            {this.state.topChartDataToday.real+'/'+this.state.topChartDataToday.should}
                                        </Row>
                                    </Col>
                                </Row>
                            </Skeleton>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card
                            style={gridStyle}
                            bodyStyle={{
                                height: 160,
                                padding: '12px 16px',
                                backgroundColor: 'rgb(210, 208, 223)',
                            }}
                            bordered={false}>
                            <Skeleton loading={this.state.confirmLoading} active>
                                <Row
                                    style={{ height: '100%' }}
                                    type="flex"
                                    justify="space-around"
                                    align="middle">
                                    <Col span={6}>
                                        <img className="charticon"
                                            src={require("../img/benzhouxunjian.png")} />
                                    </Col>
                                    <Col span={18} style={{ width: 200 }}>
                                        <Row style={{
                                            fontSize: "20px",
                                            fontWeight: "bold",
                                            color: "#000",
                                            textAlign: "center",
                                        }}>
                                            本周巡检/计划巡检
                                        </Row>
                                        <Row style={{
                                            fontSize: "30px",
                                            fontWeight: "bold",
                                            textAlign: "center",
                                        }}>
                                            {this.state.real+'/'+this.state.should}
                                        </Row>
                                    </Col>
                                </Row>
                            </Skeleton>
                        </Card>
                    </Col>
                    <Col span={8}>
                        <Card
                            style={gridStyle}
                            bodyStyle={{
                                height: 160,
                                padding: '12px 16px',
                                backgroundColor: 'rgb(207, 218, 213)',
                            }}
                            bordered={false}>
                            <Skeleton loading={this.state.confirmLoading} active>
                                <Row
                                    style={{ height: '100%' }}
                                    type="flex"
                                    justify="space-around"
                                    align="middle">
                                    <Col span={6}>
                                        <img className="charticon"
                                            src={require("../img/jinriyinhuan.png")} />
                                    </Col>
                                    <Col span={18} style={{ width: 200 }}>
                                        <Row style={{
                                            fontSize: "20px",
                                            fontWeight: "bold",
                                            color: "#000",
                                            textAlign: "center",
                                        }}>
                                            已处理/已上报
                                        </Row>
                                        <Row style={{
                                            fontSize: "30px",
                                            fontWeight: "bold",
                                            textAlign: "center",
                                        }}>
                                            {this.state.topChartDataToday.safetySceneDeal + '/' + this.state.topChartDataToday.safetySceneFound}
                                        </Row>
                                    </Col>
                                </Row>
                            </Skeleton>
                        </Card>
                    </Col>
                </Row>
                <Row gutter={24}>
                    <Col span={16}>
                        <Row>
                            <Card
                                title={'近七天校园安全工作指数'}
                                style={gridStyle}
                                bodyStyle={{ height: 580, padding: 24 }}
                                bordered={false}>
                                <Skeleton loading={this.state.confirmLoading} active>
                                <ChartSecurityData></ChartSecurityData>
                                </Skeleton>
                            </Card>
                        </Row>
                    </Col>
                    <Col span={8}>
                        <Row>
                            <Card
                                title={'近七天全市'+sessionStorage.getItem("schoolLevel")+'各项排名'+'(共'+this.state.allschoolnum1+'所)'}
                                style={gridStyle}
                                bodyStyle={{ height: 250, padding: 12 }}
                                bordered={false}>
                                <Skeleton loading={this.state.confirmLoading} active>
                                    <Row>
                                        <Col span={9} push={3}>
                                            <Statistic title="综合积分" value={'第'+this.state.comprehensivePointsRank1+'名'}
                                            valueStyle={this.state.comprehensivePointsRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={6}>
                                            <Statistic title="隐患处理个数" value={'第'+this.state.dangerNumRank1+'名'}
                                            valueStyle={this.state.dangerNumRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={3}>
                                            <Statistic title="巡更次数" value={'第'+this.state.patrolNumRank1+'名'}
                                            valueStyle={this.state.patrolNumRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={6}>
                                            <Statistic title="巡更完成率" value={'第'+this.state.patrolRatesRank1+'名'}
                                            valueStyle={this.state.patrolRatesRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={3}>
                                            <Statistic title="巡检次数" value={'第'+this.state.inspectNumRank1+'名'}
                                            valueStyle={this.state.inspectNumRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={6}>
                                            <Statistic title="巡检完成率" value={'第'+this.state.inspectRatesRank1+'名'}
                                            valueStyle={this.state.inspectRatesRank1<this.state.allschoolnum1/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                    </Row>
                                </Skeleton>
                            </Card>
                        </Row>
                        <Row>
                            <Card
                                title={'近七天区县'+sessionStorage.getItem("schoolLevel")+'各项排名'+'(共'+this.state.allschoolnum2+'所)'}
                                style={gridStyle}
                                bodyStyle={{ height: 250, padding: 12 }}
                                bordered={false}>
                                <Skeleton loading={this.state.confirmLoading} active>
                                <Row>
                                        <Col span={9} push={3}>
                                            <Statistic title="综合积分" value={'第'+this.state.comprehensivePointsRank2+'名'}
                                            valueStyle={this.state.comprehensivePointsRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={6}>
                                            <Statistic title="隐患处理个数" value={'第'+this.state.dangerNumRank2+'名'}
                                            valueStyle={this.state.dangerNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={3}>
                                            <Statistic title="巡更次数" value={'第'+this.state.patrolNumRank2+'名'} 
                                            valueStyle={this.state.patrolNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={6}>
                                            <Statistic title="巡更完成率" value={'第'+this.state.patrolRatesRank2+'名'} 
                                            valueStyle={this.state.patrolRatesRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={3}>
                                            <Statistic title="巡检次数" value={'第'+this.state.inspectNumRank2+'名'} 
                                            valueStyle={this.state.inspectNumRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                        <Col span={9} push={6}>
                                            <Statistic title="巡检完成率" value={'第'+this.state.inspectRatesRank2+'名'} 
                                            valueStyle={this.state.inspectRatesRank2<this.state.allschoolnum2/2?{color:'green', marginBottom:10}:{color:'red', marginBottom:10}}/>
                                        </Col>
                                    </Row>
                                </Skeleton>
                            </Card>
                        </Row>
                    </Col>
                </Row>
            </div>
        )
    }
}
const ScoreRank = Form.create()(scoreRank);

class ChartSecurityData extends Component {
    constructor(props) {
        super(props);
        this.state = {

        };
    }

    componentDidMount() {

        getSecurityDataBySchool(parseInt(sessionStorage.getItem("departmentId")), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let chartData = [];
            chartData[0] = res.data.comprehensivepoints
            chartData[1] = res.data.patrolnum
            chartData[2] = res.data.patrolrates
            chartData[3] = res.data.dangerdealnum
            chartData[4] = res.data.inspectrates
            chartData[5] = res.data.inspectnum
            this.setState({
                chartData:chartData,
            });
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });

        getAvgAndMaxSecurityData(sessionStorage.getItem("schoolLevel"), moment().subtract(7, 'days').format('YYYY-MM-DD'), moment().subtract(1, 'days').format('YYYY-MM-DD'))
        .then((res) => {
            let avgchartData = [];
            let maxchartData = [];
            avgchartData[0] = res.data.avgcomprehensivepoints
            avgchartData[1] = res.data.avgpatrolnum
            avgchartData[2] = res.data.avgpatrolrates
            avgchartData[3] = res.data.avgdangerdealnum
            avgchartData[4] = res.data.avginspectrates
            avgchartData[5] = res.data.avginspectnum
            maxchartData[0] = res.data.maxcomprehensivepoints
            maxchartData[1] = res.data.maxpatrolnum
            maxchartData[2] = res.data.maxpatrolrates
            maxchartData[3] = res.data.maxdangerdealnum
            maxchartData[4] = res.data.maxinspectrates
            maxchartData[5] = res.data.maxinspectnum
            this.setState({
                avgchartData:avgchartData,
                maxchartData:maxchartData,
            });
            console.log('doneChartsNum', this.state.doneChartsNum)
            if (this.state.doneChartsNum == this.state.chartsNum) {
                this.setState({
                    confirmLoading: false,
                });
            }
            let chart = echarts.init(document.getElementById('chartSecurityRank'));
            let option =   {
            backgroundColor:"rgb(255,255,255,1)",
            legend: {
                orient:'vertical',
                icon: 'circle', //图例形状
                data: ['本校详细数据', '全市'+sessionStorage.getItem("schoolLevel")+'平均'],
                top:'7%',
                left:'65%',
                itemWidth: 18, // 图例标记的图形宽度。[ default: 25 ]
                itemHeight: 18, // 图例标记的图形高度。[ default: 14 ]
                itemGap: 50, // 图例每项之间的间隔。[ default: 10 ]横向布局时为水平间隔，纵向布局时为纵向间隔。
                textStyle: {
                    fontSize: 18,
                    lineHeight: 28
                },
                formatter: (name) => {
                    if(name=='本校详细数据'){
                        if(this.state.chartData.length!=0){
                        return name+' : '+'\n'
                             + '综合积分 : ' + this.state.chartData[0] + '分\n'
                             + '巡更次数 : ' + this.state.chartData[1] + '次\n'
                             + '巡更完成率 : ' + this.state.chartData[2] + '%\n'
                             + '隐患处理个数 : ' + this.state.chartData[3] + '个\n'
                             + '巡检完成率 : ' + this.state.chartData[4] + '%\n'
                             + '巡检次数 : ' + this.state.chartData[5] + '次\n'
                        }
                    }else{
                        if(this.state.avgchartData.length!=0){
                        return name+':'+'\n'
                             + '综合积分 : ' + this.state.avgchartData[0] + '分\n'
                             + '巡更次数 : ' + this.state.avgchartData[1] + '次\n'
                             + '巡更完成率 : ' + this.state.avgchartData[2] + '%\n'
                             + '隐患处理个数 : ' + this.state.avgchartData[3] + '个\n'
                             + '巡检完成率 : ' + this.state.avgchartData[4] + '%\n'
                             + '巡检次数 : ' + this.state.avgchartData[5] + '次\n'
                        }
                    }
                },

            },
            radar: {
                radius: "58%", //大小
                nameGap: 10, // 图中工艺等字距离图的距离
                center: ["27.5%", "48%"], // 图的位置
                name: {
                    textStyle: {
                    color: "#333",
                    fontSize: 15
                    },
                },
                indicator: [
                    {"name":'综合积分', "max":this.state.maxchartData[0]},
                    {"name":'巡更次数', "max":this.state.maxchartData[1]},
                    {"name":'巡更完成率', "max":this.state.maxchartData[2]},
                    {"name":'隐患处理个数', "max":this.state.maxchartData[3]},
                    {"name":'巡检完成率', "max":this.state.maxchartData[4]},
                    {"name":'巡检次数', "max":this.state.maxchartData[5]},
                ],
                splitArea: {
                    show: true,
                    areaStyle: {
                        color: '#fff',
                        shadowColor: 'rgba(14,122,191,0.19)',
                        shadowBlur: 30,
                        shadowOffsetY: 20
                    }
                },
                splitLine: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                axisLabel: {
                    show: false
                },
            
            },
        
            series: [
                {
                    type: "radar",
                    data: [
                        {   value:[this.state.maxchartData[0], this.state.maxchartData[1], this.state.maxchartData[2], this.state.maxchartData[3], this.state.maxchartData[4], this.state.maxchartData[5]],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.8, this.state.maxchartData[1]*0.8, this.state.maxchartData[2]*0.8, this.state.maxchartData[3]*0.8, this.state.maxchartData[4]*0.8, this.state.maxchartData[5]*0.8],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.6, this.state.maxchartData[1]*0.6, this.state.maxchartData[2]*0.6, this.state.maxchartData[3]*0.6, this.state.maxchartData[4]*0.6, this.state.maxchartData[5]*0.6],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.4, this.state.maxchartData[1]*0.4, this.state.maxchartData[2]*0.4, this.state.maxchartData[3]*0.4, this.state.maxchartData[4]*0.4, this.state.maxchartData[5]*0.4],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {   value:[this.state.maxchartData[0]*0.2, this.state.maxchartData[1]*0.2, this.state.maxchartData[2]*0.2, this.state.maxchartData[3]*0.2, this.state.maxchartData[4]*0.2, this.state.maxchartData[5]*0.2],
                            symbol: 'none',
                            lineStyle: {
                                width: 0
                            },
                            itemStyle: {
                                color: '#fff'
                            },
                            areaStyle: {
                                color: '#fff',
                                shadowColor: 'rgba(14,122,191,0.15)',
                                shadowBlur: 30,
                                shadowOffsetY: 20
                            }
                        },
                        {
                            name:'全市'+sessionStorage.getItem("schoolLevel")+'平均',
                            symbol: "circle",
                            symbolSize: 8,
                            value:this.state.avgchartData,
                            areaStyle: {
                                color: "rgb(245,88,87)",
                                opacity: 0.3
                            },
                            lineStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(245,88,87)'
                                }, {
                                    offset: 1,
                                    color: '#8B0000'
                                }], false),
                                width: 2
                            },
                            itemStyle: {
                                color: "#f47983",
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: 'rgb(245,88,87)'
                                }, {
                                    offset: 1,
                                    color: '#8B0000'
                                }], false),
                                borderWidth: 0.5,
                                opacity: 1
                            },
                        },
                        {
                            name:'本校详细数据',
                            symbol: "circle",
                            symbolSize: 8,
                            value:this.state.chartData,
                            areaStyle: {
                                color: "#39B2FF",
                                opacity: 0.3
                            },
                            lineStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00A2FF'
                                }, {
                                    offset: 1,
                                    color: '#0060FF'
                                }], false),
                                width: 2
                            },
                            itemStyle: {
                                color: "#00DEFF",
                                borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: '#00DEFF'
                                }, {
                                    offset: 1,
                                    color: '#1598FF'
                                }], false),
                                borderWidth: 0.5,
                                opacity: 1
                            },
                        },
                      ],
                    }
                  ]
                }

        chart.setOption(option)
        window.onresize = chart.resize;    
        })
        .catch((e) => {
            if (e.response) {
                //请求已发出，服务器返回状态码不是2xx。
                console.info(e.response.data)
                console.info(e.response.status)
                console.info(e.response.headers)
            } else if (e.request) {
                // 请求已发出，但没有收到响应
                // e.request 在浏览器里是一个XMLHttpRequest实例，
                // 在node中是一个http.ClientRequest实例
                console.info(e.request)
            } else {
                //发送请求时异常，捕捉到错误
                console.info('error', e.message)
            }
            console.info(e.config)
        });
        
    }

    
   

    render() {
        let chartStyle = {
            height: '100%',
            width: '100%',
        };
        return (
        
        <div id='chartSecurityRank' style={chartStyle} />
        )
    }
}

export {ScoreRank};